<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="js/vue.js"></script>
<script>

    /* Mixin

    */
    const Mixin = {
        // 自定义属性
        age: 100
    };

    /* 测试存在和 mixin 中不一样的数据 */
    const app = Vue.createApp({
        mixins: [Mixin], // 这里接受的是一个数组
        data() {
            return {
                msg: 'mixin 混入指定属性',
            }
        },
        age: 50,    // 这里需要配置一个全局的对象
        template: `
          <div>
          <h3>{{ msg }}</h3>
          <h5>mixin 自定义属性：{{ this.$options.age }}</h5>
          </div>
        `,
        mounted() {
            console.log("mixin 中的自定义属性", this.$options.age);
        }
    });

    // 通过配置决定使用哪个里面的属性，
    app.config.optionMergeStrategies.age = (mixinValue, appValue) => {
        return appValue || mixinValue;
    };

    app.mount("#app");

</script>
</html>
